<template>
<div>
    <div id="banner">
        <img :src="imgurl" v-if="isbanner">
    </div>
    <div class="bannertext">
        小完能餐饮点单页面
    </div>
</div>
</template>

<script>
var i = 2
export default {
  name: 'MenuBanner',
  props: {
  },
  data () {
    return {
      imgurl: require('@/assets/banner/1.jpeg'),
      isbanner: 'true'
    }
  },
  mounted () {
    setInterval(this.bannerfade, 5000)
    setInterval(this.imglz, 5000)
    setInterval(this.bannerfade, 5000)
  },
  methods: {
    bannerfade: function () {
      this.isbanner = !this.isbanner
      console.log('banner切换')
    },
    imglz: function () { //  图片轮转
      switch (i) {
        case 1:
          this.imgurl = require('@/assets/banner/1.jpeg')
          i++
          break
        case 2:
          this.imgurl = require('@/assets/banner/2.jpeg')
          i++
          break
        case 3:
          this.imgurl = require('@/assets/banner/3.jpeg')
          i++
          break
        case 4:
          this.imgurl = require('@/assets/banner/4.jpeg')
          i = 1
          break
      }
    }
  }
}

</script>
<style scoped lang="less">
@keyframes fade {
    0% {
        margin-left: -2vw;
        opacity: 0;
    }

    100% {
        margin-left: 0px;
        opacity: 1;
    }
}

#banner {
    align-self: center;
}

#banner img {
    width: 100vw;
    height: 30vh;
    animation: fade 1s ease 0s;
}
.bannertext{
    margin-top: -5px;
    position: fixed;
    z-index: 100;
    visibility: hidden;
    width: 100%;
    height: 50px;
    font-size: 40px;
    text-align: center;
    background-color: #cfcfcf;
}
@media screen and (min-width:600px) {
    #banner{
        visibility: hidden;
        position: absolute;
    }
    .bannertext{
        visibility: visible;
        position: relative;
    }
}
</style>
